<template>

  <NavBarCmp navbarTitle="剧照" leftArrow="true" />


  <van-grid class="photo-list" :column-num="4">
    <van-grid-item v-for="(photo, index) in photos" :key="index" class="photo-item">

      <div class="image-container">
        <van-image :src="updateMoviePhotosImageUrl(photo)" class="photo-img" v-if="photo"
          @click="previewPhoto(photos)" />
        <div v-else class="placeholder"></div>
      </div>


    </van-grid-item>
  </van-grid>


  <footer-cmp />


</template>


<script setup>
import { updateMoviePhotosImageUrl } from "@/tools/index.js"

import { computed } from "vue"
import { useStore } from "@/stores/index.js"
const store = useStore()


const photos = computed(() => store.movieDetailPage.movieGallery.photos);

const previewPhoto = (photos) => {

  showImagePreview({ images: [...photos], showIndicators: true })


};




</script>




<style scoped>
.photo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 50.5px;
  /* background-color: #333; */
}


.photo-img {
  cursor: pointer;
}


:deep(.van-grid-item__content) {

  background-color: #333 !important;
}

:deep(.van-grid-item__content) {
  padding: 5px;
}



.image-container {
  position: relative;
  /* width: 110px;
  height: 150px; */
  /* 根据需要调整高度 */
}

.photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  /* 占位图背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #ccc;
}
</style>
